<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        /** 弃用，geoserver矢量瓦片图层，带全部业务数据，数据量太大 */
        mapboxgl.accessToken = 'pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v10',
            center: [117.125829, 36.656704],
            zoom: 8
        });

        map.on('load', async () => {
            // Add a geojson point source.
            // Heatmap layers also work with a vector tile source.
            let ip1 = '6ql20nip.ipyingshe.net';
            // let ip1 = '192.168.0.53:8080';
            let layer = 'gv_cun'
            let tileurl = `http://${ip1}/geoserver/gwc/service/tms/1.0.0/rp7%3A${layer}@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;

            map.addSource("bj", {
                type: "vector",
                scheme: "tms",
                tiles: [
                    tileurl
                ],
                //   promoteId: "gid",
            });
            let max= 500;
            // Add a layer showing the state polygons.
            map.addLayer({
                'id': 'states-layer',
                'type': 'fill',
                'source': 'bj',
                'source-layer':`${layer}`,
                'paint': {
                    'fill-color': [
                            'interpolate',
                            ['linear'],
                            ['/',['get', 'f176'],['get','area']],
                            0,
                            'rgba(240, 240, 240, 0.2)',
                            max,
                            'rgba(240, 0, 0, 1)'
                        ],
                    'fill-outline-color': 'rgba(200, 100, 240, 1)'
                }
            });
        });
    </script>

</body>

</html>